<title>权限管理</title>

<!-- ajax layout which only needs content area -->
<div class="page-header">
    <h1>
        权限管理
    </h1>
</div><!-- /.page-header -->


<div class="row" data-ng-app="reportSearchApp" data-ng-controller="reportSearchController">
    <div class="col-xs-12">
        <!-- PAGE CONTENT BEGINS -->
        <div class="row">
            <div class="col-xs-12">
                <div class="widget-box">
                    <div class="widget-header">
                        <h4 class="widget-title">查询条件</h4>

                                <span class="widget-toolbar">
                                    <a class="btn btn-primary btn-xs" data-ng-click="updateSearchResult()">搜索</a>
                                <a class="btn btn-xs" onclick="$('#report-search-form')[0].reset()">重置</a>
                                <!--<a class="btn btn-xs" onclick="alert($('#report-search-form').serialize())">数据</a> -->
                                    <!-- TODO delete -->
                                </span>
                    </div>

                    <div class="widget-body" style="display: block;">
                        <div class="widget-main">
                            <form role="search" method="get" id="report-search-form">


                                <div class="row">

                                    <div class="col-xs-12 col-sm-6 col-lg-4 col-lg-push-2">


                                        <label class="control-label" for="perName">权限名称</label>


                                        <input name="taskInfo" type="text" id="perName" value="*"
                                               class="form-control" onfocus="if (value =='*'){value =''}"
                                               onblur="if (value ==''){value='*'}"
                                                />
                                    </div>
                                    <div class="hr hr8 visible-xs-block"></div>
                                    <div class="col-xs-12 col-sm-6 col-lg-4 col-lg-push-2">


                                        <label class="control-label" for="perPath">权限路径</label>


                                        <input name="taskInfo" type="text" id="perPath" value="*"
                                               class="form-control" onfocus="if (value =='*'){value =''}"
                                               onblur="if (value ==''){value='*'}"
                                                />

                                    </div>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="hr hr-double hr-dotted hr10"></div>
        <div id="alert">

        </div>
        <div class="row" data-ng-show="tableRows">
            <div class="col-xs-12">
                <table id="menu-management-table" class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>
                        <th class="center">
                            <label class="pos-rel">
                                <input type="checkbox" class="ace"/>
                                <span class="lbl"></span>
                            </label>
                        </th>
                        <th>上级权限</th>
                        <th>权限名称</th>
                        <th>权限路径</th>
                        <th>是否为父菜单</th>
                        <th>
                            <div class="hidden-sm hidden-xs btn-group">
                                <button class="btn btn-xs btn-success"
                                        data-ng-click="createModal(updateSelectRows(),0);switchPages(0)">
                                    <i class="ace-icon fa fa-search-plus bigger-120"></i>
                                </button>

                                <button class="btn btn-xs btn-info"
                                        data-ng-click="createModal(updateSelectRows(),1);switchPages(0)">
                                    <i class="ace-icon fa fa-pencil bigger-120"></i>
                                </button>

                                <button class="btn btn-xs btn-danger"
                                        data-ng-click="createModal(updateSelectRows(),2);switchPages(0)">
                                    <i class="ace-icon fa fa-trash-o bigger-120"></i>
                                </button>

                            </div>

                            <div class="hidden-md hidden-lg">
                                <div class="inline pos-rel">
                                    <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown"
                                            data-position="auto">
                                        <i class="ace-icon fa fa-cog icon-only bigger-110"></i>
                                    </button>

                                    <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
                                        <li>
                                            <a href="#" class="tooltip-info" data-rel="tooltip" title="View"
                                               data-ng-click="createModal(row.id,0)">
													<span class="blue">
														<i class="ace-icon fa fa-search-plus bigger-120"></i>
													</span>
                                            </a>
                                        </li>

                                        <li>
                                            <a href="#" class="tooltip-success" data-rel="tooltip" title="Edit"
                                               data-ng-click="createModal(row.id,1)">
													<span class="green">
														<i class="ace-icon fa fa-pencil-square-o bigger-120"></i>
													</span>
                                            </a>
                                        </li>

                                        <li>
                                            <a href="#" class="tooltip-error" data-rel="tooltip" title="Delete"
                                               data-ng-click="createModal(row.id,2)">
													<span class="red">
														<i class="ace-icon fa fa-trash-o bigger-120"></i>
													</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </th>
                    </tr>
                    </thead>

                    <tbody data-ng-repeat="row in tableRows">
                    <tr>
                        <td class="center" data-model-id="{{row.id}}">
                            <label class="pos-rel">
                                <input type="checkbox" class="ace"/>
                                <span class="lbl"></span>
                            </label>
                        </td>
                        <td>
                            {{row.name}}
                        </td>
                        <td>{{row.href}}</td>

                        <td>是</td>
                        <td>否</td>


                        <td>
                            <div class="hidden-sm hidden-xs btn-group">
                                <button class="btn btn-xs btn-success" data-ng-click="createModal(row.id,0)">
                                    <i class="ace-icon fa fa-search-plus bigger-120"></i>
                                </button>

                                <button class="btn btn-xs btn-info" data-ng-click="createModal(row.id,1)">
                                    <i class="ace-icon fa fa-pencil bigger-120"></i>
                                </button>

                                <button class="btn btn-xs btn-danger" data-ng-click="createModal(row.id,2)">
                                    <i class="ace-icon fa fa-trash-o bigger-120"></i>
                                </button>

                            </div>

                            <div class="hidden-md hidden-lg">
                                <div class="inline pos-rel">
                                    <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown"
                                            data-position="auto">
                                        <i class="ace-icon fa fa-cog icon-only bigger-110"></i>
                                    </button>

                                    <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
                                        <li>
                                            <a href="#" class="tooltip-info" data-rel="tooltip" title="View"
                                               data-ng-click="createModal(row.id,0)">
													<span class="blue">
														<i class="ace-icon fa fa-search-plus bigger-120"></i>
													</span>
                                            </a>
                                        </li>

                                        <li>
                                            <a href="#" class="tooltip-success" data-rel="tooltip" title="Edit"
                                               data-ng-click="createModal(row.id,1)">
													<span class="green">
														<i class="ace-icon fa fa-pencil-square-o bigger-120"></i>
													</span>
                                            </a>
                                        </li>

                                        <li>
                                            <a href="#" class="tooltip-error" data-rel="tooltip" title="Delete"
                                               data-ng-click="createModal(row.id,2)">
													<span class="red">
														<i class="ace-icon fa fa-trash-o bigger-120"></i>
													</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr data-ng-repeat="subRow in tableRows.subPer">
                        <td class="center" data-model-id="{{subRow.id}}">
                            <label class="pos-rel">
                                <input type="checkbox" class="ace"/>
                                <span class="lbl"></span>
                            </label>
                        </td>
                        <td>
                            {{subRow.name}}
                        </td>
                        <td>{{subRow.href}}</td>

                        <td>否</td>
                        <td>{{row.name}}</td>


                        <td>
                            <div class="hidden-sm hidden-xs btn-group">
                                <button class="btn btn-xs btn-success" data-ng-click="createModal(row.id,0)">
                                    <i class="ace-icon fa fa-search-plus bigger-120"></i>
                                </button>

                                <button class="btn btn-xs btn-info" data-ng-click="createModal(row.id,1)">
                                    <i class="ace-icon fa fa-pencil bigger-120"></i>
                                </button>

                                <button class="btn btn-xs btn-danger" data-ng-click="createModal(row.id,2)">
                                    <i class="ace-icon fa fa-trash-o bigger-120"></i>
                                </button>

                            </div>

                            <div class="hidden-md hidden-lg">
                                <div class="inline pos-rel">
                                    <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown"
                                            data-position="auto">
                                        <i class="ace-icon fa fa-cog icon-only bigger-110"></i>
                                    </button>

                                    <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
                                        <li>
                                            <a href="#" class="tooltip-info" data-rel="tooltip" title="View"
                                               data-ng-click="createModal(row.id,0)">
													<span class="blue">
														<i class="ace-icon fa fa-search-plus bigger-120"></i>
													</span>
                                            </a>
                                        </li>

                                        <li>
                                            <a href="#" class="tooltip-success" data-rel="tooltip" title="Edit"
                                               data-ng-click="createModal(row.id,1)">
													<span class="green">
														<i class="ace-icon fa fa-pencil-square-o bigger-120"></i>
													</span>
                                            </a>
                                        </li>

                                        <li>
                                            <a href="#" class="tooltip-error" data-rel="tooltip" title="Delete"
                                               data-ng-click="createModal(row.id,2)">
													<span class="red">
														<i class="ace-icon fa fa-trash-o bigger-120"></i>
													</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </td>
                    </tr>

                    </tbody>
                </table>
                <button data-ng-click="createModal(tableRows[1],3)">+</button>
            </div>
            <!-- /.span -->
        </div>
        <!-- /.row -->


        <!-- Modal -->
        <!-- Modal -->
        <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="modalLabel">{{modalElements.title}}</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row" data-ng-if="(modalElements.scope =='view'|| modalElements.scope =='edit')">
                            <div data-ng-repeat="j in selectRowsModel" data-modal-page="{{$index}}">
                                <div class="" data-ng-repeat="i in modalRows">
                                    <div data-ng-hide="(i.modal.state =='hidden')">
                                        <div class="col-xs-12 col-sm-6 col-lg-4">
                                            <label>{{i.modal.label}}</label>

                                            <input class="form-control" data-ng-if="i.modal.elementType =='input'"
                                                   data-ng-model="j[i.valueName]"
                                                   data-ng-disabled="modalElements.scope =='view' || i.modal.state =='readonly'"/>


                                            <div class="hr hr8"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row" data-ng-if="modalElements.scope =='del'">
                            <div class="col-xs-12">
                                <h4>确认要删除：</h4>

                                <div class="" data-ng-repeat="j in selectRowsModel">
                                    <div class="" data-ng-repeat="i in modalRows"> <!-- TODO -->
                                        <div data-ng-hide="(i.modal.state =='hidden')">
                                            <div class="col-xs-12 col-sm-6 col-lg-4">
                                                <label>{{i.modal.label}}</label>

                                                <input class="form-control" data-ng-if="i.modal.elementType =='input'"
                                                       data-ng-model="j[i.valueName]"
                                                       data-ng-disabled="modalElements.scope =='view' || i.modal.state =='readonly'"/>

                                                <div class="hr hr8"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row" data-ng-if="modalElements.scope =='add'">
                            <div data-ng-repeat="j in selectRowsModel" data-modal-page="{{$index}}">
                                <div class="" data-ng-repeat="i in modalRows">
                                    <div data-ng-hide="(i.modal.state =='hidden')">
                                        <div class="col-xs-12 col-sm-6 col-lg-4">
                                            <label>{{i.modal.label}}</label>

                                            <input class="form-control" data-ng-if="i.modal.elementType =='input'"
                                                   data-ng-model="new[i.valueName]"/> <!-- model binding -->


                                            <div class="hr hr8"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row center">
                            <ul class="pagination">

                                <li data-ng-repeat="j in selectRowsModel">
                                    <a data-ng-click="switchPage($index)" value="{{$index}}">{{$index+1}}</a>
                                </li>


                            </ul>
                        </div>
                    </div>
                    <div class="modal-footer">


                        <button type="button" class="btn btn-primary" data-ng-show="modalElements.applyButton"
                                data-ng-click="modalElements.applyButtonAction()">确认
                        </button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                    </div>
                </div>
            </div>
        </div>
        <!-- PAGE CONTENT ENDS -->
    </div>
    <!-- /.col -->
</div><!-- /.row -->


<!-- page specific plugin scripts -->
<script type="text/javascript">

    var scripts = [null, "lib/assets/js/jquery.validate.js", "lib/assets/js/jquery-ui.custom.js", "lib/assets/js/jquery.ui.touch-punch.js", "lib/assets/js/chosen.jquery.js", "lib/assets/js/fuelux/fuelux.spinner.js", "lib/assets/js/date-time/bootstrap-datepicker.js", "lib/assets/js/date-time/bootstrap-timepicker.js", "lib/assets/js/date-time/moment.js", "lib/assets/js/date-time/daterangepicker.js", "lib/assets/js/date-time/bootstrap-datetimepicker.js", "lib/assets/js/bootstrap-colorpicker.js", "lib/assets/js/jquery.knob.js", "lib/assets/js/jquery.autosize.js", "lib/assets/js/jquery.inputlimiter.1.3.1.js", "lib/assets/js/jquery.maskedinput.js", "lib/assets/js/bootstrap-tag.js", null]
    $('.page-content-area').ace_ajax('loadScripts', scripts, function () {
        //inline scripts related to this page
        jQuery(function ($) {
            //initiate dataTables plugin
            var active_class = 'active';
            $('#menu-management-table').find('> thead > tr > th input[type=checkbox]').eq(0).on('click', function () {
                console.log("first");
                var th_checked = this.checked;//checkbox inside "TH" table header

                $(this).closest('table').find('tbody > tr').each(function () {
                    var row = this;
                    if (th_checked) $(row).addClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', true);
                    else $(row).removeClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', false);
                });
            });
            //select/deselect a row when the checkbox is checked/unchecked
            $('#menu-management-table').on('click', 'td input[type=checkbox]', function () {
                console.log("2nd");
                var $row = $(this).closest('tr');
                if (this.checked) $row.addClass(active_class);
                else $row.removeClass(active_class);
            });//add an active class to tr element

        });

        //angularjs
        var app = angular.module('contentApp');
        app.controller("reportSearchController", function ($scope, $http) {

            $scope.formElements = {
                "dateRange": "*",
                "projectSelect": "*",
                "approveState": "all",
                "prpSelect": "*",
                "taskInfo": "*"
            } //init
            $http.post("fake/daily-report-management/form.JSON", $scope.formElements).success(function (response) {  //TODO Modify the api & post info here
                $scope.formRanges = response;
            });
            $scope.updateReportSearchForm = function () {

                $http.post("fake/daily-report-management/form.JSON", $scope.formElements).success(function (response) {  //TODO Modify the api & post info here
                    $scope.formRanges = response;
                    console.log("Form updated!");
                });
            };
            $scope.updateSearchResult = function () {
                $http.post("fake/system-management-permission/permission.JSON", $scope.formElements).success(function (response) {  //TODO Modify the api & post info here
                    $scope.tableRows = response;
                    console.log("Tables updated!");
                });
            };
            $scope.updateSelectRows = function () {
                console.log("updateSelectRows");
                var selectedRows = [];
                $('#menu-management-table >tbody > tr ').each(function () {
                    if ($(this).hasClass('active')) {

                        $(this).find('td:first-child').attr("data-model-id", function (i, origValue) {
                            selectedRows.push(origValue)
                            return origValue;
                        })
                    }
                });
                console.log(selectedRows);
                return selectedRows;
            };


            $http.post("fake/system-management-permission/modal.JSON", {}).success(function (response) {  //TODO Modify the api & post info here
                $scope.modalRows = response;
                console.log("Modal updated!");
            });//get modal settings JSON

            $scope.createModal = function (model, type) {  // the array that the model id which you select , the modal config, 0 = view, 1 = edit, 2 = delete //考虑将modal与table合并
                if (model == undefined || model == {} || model == [] || model == '') {
                    return;
                }
                $scope.selectRowsModel = []; //create an array for selected table elements

                $http.post("fake/daily-report-management/form.JSON", $scope.formElements).success(function (response) {  //TODO Modify the api & post info here don't return "*"
                    $scope.modalRanges = response;
                });//get the range for select html elements

                function editModal() {
                    $http.post("fake/daily-report-management/submit.JSON", $scope.selectRowsModel).success(function (response) {  //TODO Modify the api & post info here don't return "*"
                        $scope.alert = response;
                        //TODO alert here
                        $("#modal").modal('toggle');
                    });
                }

                function delModal() {
                    $http.post("fake/daily-report-management/submit.JSON", [null]).success(function (response) {  //TODO Modify the api & post info here don't return "*"
                        $scope.alert = response;
                        //TODO alert here
                        $("#modal").modal('toggle');
                    });
                }

                function addModal() {
                    $http.post("fake/daily-report-management/submit.JSON", [null]).success(function (response) {  //TODO Modify the api & post info here don't return "*"
                        $scope.alert = response;
                        //TODO alert here
                        $("#modal").modal('toggle');
                    });
                }

                switch (type) { //set type config
                    case 0:
                        $scope.modalElements = {
                            "title": "查看详细信息",
                            "applyButton": false,
                            "scope": "view"
                        };
                        break;
                    case 1:
                        $scope.modalElements = {
                            "title": "修改详细信息",
                            "applyButton": true,
                            "applyButtonAction": editModal,
                            "scope": "edit"
                        };
                        break;
                    case 2:
                        $scope.modalElements = {
                            "title": "删除确认",
                            "applyButton": true,
                            "applyButtonAction": delModal,
                            "scope": "del"
                        };
                        break;
                    case 3:
                        $scope.modalElements = {
                            "title": "添加",
                            "applyButton": true,
                            "applyButtonAction": addModal,
                            "scope": "add"
                        };
                        break;
                    default :
                        alert("Wrong type in modal creation!");
                }
                for (var index in model) { //copy select models
                    for (var tableRowIntex in $scope.tableRows) {
                        if ($scope.tableRows[tableRowIntex].id == model[index]) {
                            $scope.selectRowsModel.push($.extend(true, {}, $scope.tableRows[tableRowIntex])); //deep copy
                        }
                    }
                }

                $("#modal").modal('toggle');//show modal

            };

            $scope.switchPage = function (toPage) {

                console.log("ToPage" + toPage);
                $('.pagination > li').each(function () {
                    console.log($(this).children('a').attr("value") == toPage);
                    if ($(this).children('a').attr("value") == toPage) {
                        $(this).addClass('active');

                    } else {
                        $(this).removeClass('active');
                    }
                });


                $('div[data-modal-page]').each(function () {
                    $(this).attr("data-modal-page", function (i, origValue) {

                        if (origValue == toPage) {
                            $(this).show();

                        } else {
                            $(this).hide();
                        }
                    })
                })
            }

            $('#modal').on('shown.bs.modal', function (e) {
                $scope.switchPage(0);
            })
        })

    })

</script>


